<template>
    <div class="video">
        <div class="top">
            <div class="tuic" @click="$router.back(-1);$router.isBack = true"><van-icon name="arrow-left" size="18" color="#fff"/></div>
        </div>
        <div class="videoDOM">
            <video :src="mp4Src" width="100%" autoplay ref="video" controls></video>
        </div>
    </div>
</template>

<script>
import { getMusicMp4, getErrorMV } from '@/api/music'
import { Dialog } from 'vant';
export default {
    data() {
        return {
            mp4Src : ''
        }
    },
    methods : {
        getMusicMp4(rid){
            getMusicMp4(rid).then(res => {
                if(res.code == 200){
                    this.mp4Src = res.data
                }
            })
        },
        videoError(){
            if(!this.$route.query.rid){
                return
            }
            getErrorMV(this.$route.query.rid).then(res => {
                console.log('getErrorMV', res);
            })
        },
    },
    created(){
        if(this.$route.query.rid){
            this.getMusicMp4(this.$route.query.rid)
        }
    },
    mounted(){
        this.$nextTick(() => {
            // this.$refs.video.onerror = this.videoError
        })
    }
}
</script>

<style scoped>
.video{
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
}
.tuic{
    padding: 10px;
    line-height: 30px;
}
</style>